<template>
  <view class="container">
    <view class="news">
      <view class="news-title">2021新高考怎么选科</view>
      <view class="news-time">2022-10-02 17:50:30</view>
      <view v-html="htmlText"></view>
    </view>
    <view class="footer">
      <view><text class="text">{{'<'}}上一篇</text>高考考生想成为保送生需要什么条件</view>
      <view><text class="text">{{'>'}}下一篇</text>国际经济与贸易专业文科生就业前景分析</view>
    </view>
    <view class="about">
      <view class="about-title">与“2021年新高考怎么选科?”相关推荐</view>
      <view class="list">
        <view v-for="item in imgList" :key="item.name" class="cell">
          <image :src="item.img" mode="aspectFit" />
          <view class="cell-right">
            <view class="title"> {{ item.title }}</view>
            <view class="time"> {{ item.updateTimeInSecond }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
import { imgList } from '../index/indexData'
import { htmlText } from './data'
export default {
  data() {
    return {
      content: '',
      imgList,
      htmlText
    };
  },
  methods: {
  }
};
</script>
  
<style lang="less" scoped>
.container {

  .news,
  .footer {
    background-color: #fff;
    padding: 30upx;
  }

  .news-title {
    font-size: 34upx;
    font-weight: 700;
    text-align: center;
  }

  .news-time {
    font-size: 22upx;
    color: #999999;
    text-align: center;
    margin-bottom: 40upx;
  }

  .footer {
    .text {
      display: inline-block;
      margin: 15upx 20upx 15upx 0;
      padding: 5upx;
      background-color: #f2f4f8;
    }
  }

  .about {
    background-color: #fff;

    .about-title {
      padding: 30upx;
      font-size: 32upx;
      font-weight: 700;
    }

    .list {
      padding: 20upx 30upx;

      .cell {
        width: 100%;
        height: 160upx;
        margin-bottom: 30upx;
        display: flex;
        justify-content: space-between;
        border-radius: 5upx;
        text-align: start;

        image {
          width: 230upx;
          height: 160upx;
        }

        .cell-right {
          width: 450upx;
          padding: 20upx 0;

          .title {
            font-size: 26upx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .time {
            font-size: 24upx;
            color: #888888;
          }
        }
      }
    }
  }
}
</style>